<template>
    <CommonPage :tableConfig="option" ref="incomingRef" formKey="incomingOrdersList"></CommonPage>
    <ElDialog v-model="dialog" width="800px" title="详情">
        <IncomingOrdersListDetail v-if="dialog" :rowInfo="rowInfo"/>
    </ElDialog>
    <ElDialog v-model="reDialog" width="800px" title="人工干预">
        <OrderDataRepair v-if="reDialog" :rowInfo="rowInfo" @close = "close"/>
    </ElDialog>
</template>
<script setup>
import CommonPage from '@/components/CommonPage/index.vue'
import IncomingOrdersListDetail from './components/incomingOrdersListDetail.vue'
import OrderDataRepair from './components/orderDataRepair.vue'

import { reactive, ref } from 'vue';
import {ElDialog } from 'element-plus'
import {loadStatus, platform,orderStatus,stageStatus} from "@/utils/enum.js"
import {downOrderInfo} from "@/server/manage/incoming.js"
import {adornUrl} from "@/utils"
import {getToken} from '@/utils/auth.js'

const incomingRef = ref()
const dialog = ref(false)
const reDialog = ref(false)
const rowInfo = ref()
const option = reactive({
    operationWidth: 150,
    formItems: [
        {label: '客户企业名称', prop: 'custName', type: 'input', show: true},
        {label: '渠道名称', prop: 'channelName', type: 'input', show: true},
        {label: '产品名称', prop: 'productName', type: 'input', show: true},
        {label: '电商平台', prop: 'eBusinessPlatform', type: 'select', show: true, options: platform},
        {label: '订单阶段', prop: 'orderStage', type: 'select', show: true, options: loadStatus},
        {label: '阶段状态', prop: 'stageStatus', type: 'select', show: true, options: stageStatus},
        {label: '订单状态', prop: 'orderStatus', type: 'select', show: true, options: orderStatus},
    ],
    // formData: {stageStatus: 3},
    buttons: [
        {label: "导出", icon: 'Download', auth: '', handle: (event)=> {download()}},
    ],
    options: [
        {label: '详情', handle: (event) => {handleDetail(event)}, isShow:() => {return true}, type: "success"},
        {label: '数据补充', handle: (event) => {repairOrder(event)}, isShow:(row) => {return (row.orderStage == 1 || row.orderStage == 4) && row.stageStatus == 4 }, type: "danger"},
        {label: '数据修改', handle: (event) => {repairOrderUpdate(event)}, isShow:(row) => {return row.orderStage == 2 && row.stageStatus == 2 }, type: "danger"},
    ]
})
// 下载
const download = () => {
    let params = JSON.parse(JSON.stringify(incomingRef.value.tableConfig.formData||"{}"))
    params.fileTitleName = incomingRef.value.tableConfig.columns.filter(item => item.show).map(item => item.prop).join(",")
    let str = ''
    for(let key in params) {
        str+=('&'+key+'='+params[key])
    }
    let url = adornUrl('/generator/orderinfo/downOrderInfo?token=')+getToken()+str
    window.open(url)
}
// 查看详情
const handleDetail = (info) => {
    rowInfo.value = info
    dialog.value = true
}
// 数据补充
const repairOrder = (info) => {
    rowInfo.value = info
    rowInfo.value.type = 'save'
    reDialog.value = true
}
// 数据修改
const repairOrderUpdate = (info) => {
    rowInfo.value = info
    rowInfo.value.type = 'update'
    reDialog.value = true
}
const close=()=>{    
    reDialog.value = false
}
</script>